<script setup>
import { useMemberStore } from "@/stores";
const memberStore = useMemberStore();
// 获取屏幕边界到安全区距离
const { safeAreaInsets } = uni.getSystemInfoSync();
</script>

<template>
  <view
    class="user-info"
    :style="{ marginTop: safeAreaInsets?.top + 'px' }"
    v-if="memberStore.profile"
  >
    <image
      class="user-avatar"
      src="@/static/images/avatar.png"
      mode="aspectFit"
    />
    <view class="user-details">
      <view class="user-phone">{{ memberStore.profile.phone }}</view>
      <view class="user-name"
        >昵称: {{ memberStore.profile.name || "暂无" }}</view
      >
    </view>
  </view>
  <view
    class="not-login"
    :style="{ marginTop: safeAreaInsets?.top + 'px' }"
    v-else
  >
    <image
      class="user-avatar"
      src="@/static/images/not_login.jpg"
      mode="aspectFit"
    />
    <view class="user-details">
      <view class="login-prompt">您还未登录，请先登录</view>
      <navigator url="/pages/login/login" hover-class="none" class="nickname"
        >去登录</navigator
      >
    </view>
  </view>
</template>

<style scoped lang="scss">
.user-info,
.not-login {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 20vh;
  background-color: #ffffff;
  padding: 0 16rpx;
}

.user-avatar {
  width: 150rpx; // 设置固定宽度
  height: 150rpx; // 设置固定高度
  border-radius: 50%;
  overflow: hidden; // 确保图片裁剪成圆形
  margin-right: 30rpx;
}

.user-details {
  flex: 1; // 使用户详情部分占据剩余空间
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.user-phone {
  font-size: 40rpx;
  color: black;
  margin-top: 10rpx;
}

.user-name {
  font-size: 32rpx;
  color: #999999;
  margin-top: 20rpx;
}

.login-prompt {
  font-size: 34rpx;
  color: #999999;
  margin-bottom: 20rpx;
}

.nickname {
  font-size: 32rpx;
  color: #007aff;
}
</style>
